@import url("http://fonts.googleapis.com/css?family=Lato");

input{
  width:150px;
  height:20px;
  line-height:30px;
}

input:focus{
  outline: 0;
  border: 1px solid #f95d5d;
  box-shadow: 0px 0px 10px 0px #f95d5d;
}

* {
  font-smoothing: antialiased;
}

body {
  background: url(background.jpg);
  background-size:100% 100%;
  background-attachment: fixed;
}

.total{
  height:550px;
}

.edge{
  position: relative;
  /*设置导航栏的框框*/
  margin: 100px 450px;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
  width: 300px;/*框框的宽度*/
  height: 300px;/*框框的长度*/
  padding: 0px;/*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/
  border:1px solid #000;/*添加边框*/
}

.light{
  font-size: 35px;
  text-align: center;
  width: 100%;
  position: absolute;
  top: -20px;
  /*渐变背景*/
  background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
  #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
  color: transparent; /*文字填充色为透明*/
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
  background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
  /* 动画 */
  animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
  }
  100% {
    background-position: -100% 0;
  }
}

.id{
  /*margin: 40px 60px;*/
  position: absolute;left: 70px;top: 80px;
}
.psw{
  position: absolute;left: 70px;top: 120px;
}
.wrapper {
  position: absolute;
  max-width: 960px;
  margin: 0px auto 0;
  background-color: #000;
}
.listc {
  position: absolute;
  left: 50px;
  top: 180px;
  width: 570px;
  margin: auto;
}
ul {
  list-style: none;
  float: left;
}
ul li {
  position: relative;
  width: 100px; height: 100px;
  float: left;
  background: #474644;
  border-radius: 15px;
  border-bottom: 5px solid #33322f;
  border-left: 3px solid #000000;
  box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
  -webkit-transition: -webkit-box-shadow .15s ease-in-out;

}
ul li a {
  position: absolute;
  width: 50px; height: 50px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  top: 31%;
  left: 25%;
}
ul li i{
  text-shadow:
    0px 0px #504F4E,
    0px 1px #424241,
    -1px 2px #353534,
    -2px 3px #282827,
    0px 6px 5px rgba(51, 50, 47, 0.8);
  color: #858482;
}

.linkedin:hover i{
  text-shadow:
    0px 0px #C42829, 0px 1px #AE2425, -1px 2px #991F20, -2px 3px #831B1C, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #da2d2e;
  color: #da2d2e;
}


ul li:hover i{
  -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

ul li:active{
  border-bottom: 1px solid #33322f;
  top: 5px;
  border-left: 1px solid #000000;
  margin-right: 2px;
  box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
  z-index: -1;
}

